<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">优惠券卡包</block>
		</cu-custom>
		<view class="bg-white">
			<view class="flex solid-bottom padding justify-between">
				<view class="cardtab">
					<text @click="changeTab(0)" :class="{ active: query.status === 0 }">全部</text>
					<text @click="changeTab(1)" :class="{ active: query.status === 1 }">商城购物券</text>
					<text @click="changeTab(2)" :class="{ active: query.status === 2 }">门店核销券</text>
				</view>
				<view class="cz" v-if="cz_del" @tap="canel">
					<image :src="imgurl + '/icon_del.png'" class="mr5"></image>
					<text>取消</text>
				</view>
				<view class="cz" v-else @tap="guangli">
					<image :src="imgurl + '/icon_edit.png'" class="mr5"></image>
					<text>管理</text>
				</view>
			</view>
		</view>
		<view>
			<checkbox-group>
				<view class="qui-cells margin-sm" v-for="item in list" :key="item.CodeId">
					<view class="qui-cell" style="padding: 0 20upx 0 0;position: relative;">
						<view class="cell-hd">
							<view class="card_bg tc" :style="'background-image:url(' + imgurl + 'juan_bg01.png)'">
								<view class="text-white fs28 fw600 pt30">
									￥
									<text class="fs50 ff">{{ item.CradValue }}</text>
								</view>
								<view class="fs22 text-white">{{ item.UsageConditionStr }}</view>
							</view>
						</view>
						<view class="cell-bd">
							<view class="fs26 fw600">{{ item.Title }}</view>
							<view class="juan" v-if="item.UsageStr == '1'">商城购物券</view>
							<view class="juan" v-else>门店核销券</view>
							<view class="fs20 text-muted mt30">{{ item.TermOfValidity }}</view>
						</view>
						<view class="cell-ft" v-if="cz_del"><checkbox :checked="item.isDel" @click="checkbox($event, item)" /></view>
						<view class="cell-ft" v-else-if="!cz_del && item.MaxLimitStatus">
							<navigator :url="'/pages/my/' + (item.UsageStr == '1' ? 'cardDetail' : 'shophxCard') + '?codeId=' + item.CodeId">
								<view class="usebtn">立即使用</view>
							</navigator>
						</view>
						<view class="carddate" :style="'background-image:url(' + imgurl + 'juan_bg03.png)'" v-else>
							<view class="text-white tc mt15 ml20" style="font-size: 16upx;transform: rotate(40deg);">{{ item.MaxLimitValue }}天后可用</view>
						</view>
					</view>
				</view>
			</checkbox-group>
			<uni-load-more :status="loadingType"></uni-load-more>
			<view style="height: 95upx;" v-if="cz_del"><view class="cardbtn text-white" style="background-color: #ff3a1a;" @click="Del()">删除</view></view>
			<view style="height: 95upx;" v-else><view class="cardbtn">优惠券记录</view></view>
		</view>
	</view>
</template>

<script>
import uniLoadMore from 'common/components/uni-load-more/uni-load-more.vue';
import base from 'utils/base.js';
export default {
	components: { uniLoadMore },
	data() {
		return {
			loadingType: 'loading',
			query: {
				userId: 0,
				status: 0,
				pageIndex: 1,
				pageSize: 10
			},
			list: [],
			imgurl: this.$imgurl,
			cz_del: false
		};
	},
	methods: {
		getData() {
			var t = this;
			let params = {
				type: 'GET',
				url: '/api/Card/GetCardList',
				data: this.query,
				sCallback: function(response) {
					for (var i = 0; i < response.Data.Data.length; i++) {
						response.Data.Data[i].isDel = true;
					}
					t.list = t.list.concat(response.Data.Data);

					if (response.Data.Total > t.query.pageIndex * t.query.pageSize) {
						t.loadingType = 'more';
					} else {
						t.loadingType = 'nomore';
					}
				}
			};
			base.request(params);
		},
		changeTab(index) {
			this.list = [];
			this.query.status = index;
			this.query.pageIndex = 1;
			this.getData();
		},
		mdInfo() {
			uni.navigateTo({
				url: '/pages/home/mdInfoEdit'
			});
		},
		guangli() {
			this.cz_del = true;
		},
		canel() {
			this.cz_del = false;
		},
		Del() {
			var arr = new Array();
			this.list.forEach(item => {
				if (item.isDel) {
					arr.push(item.CodeId);
				}
			});
			if (arr.length > 0) {
				var vue = this;
				let params = {
					type: 'GET',
					url: '/api/Card/DelCard',
					data: {
						userId: vue.query.userId,
						codeIds: arr.join()
					},
					sCallback: function(response) {
						if (response.IsSuccess) {
							vue.list = [];
							vue.getData();
						}
					}
				};
				base.request(params);
			}
		},
		checkbox(e, i) {
			this.list.forEach(item => {
				if (item.CodeId == i.CodeId) {
					item.isDel = !item.isDel;
				}
			});
		}
	},
	onLoad() {
		this.query.userId = getApp().globalData.UserInfo.UserID;
		this.getData();
	},
	onReachBottom() {
		if (this.loadingType === 'more') {
			this.query.pageIndex += 1;
			this.getData();
		}
	}
};
</script>

<style lang="scss">
.img36 {
	width: 36rpx;
	height: 36rpx;
}

.cardtab {
	text {
		font-size: 28upx;
		color: #585858;
		padding: 30upx;
	}

	.active {
		position: relative;
		font-size: 28upx;
		color: #1a1a1a;
		font-weight: 600;

		&:before {
			position: absolute;
			content: '';
			display: inline-block;
			width: 63upx;
			margin: 0 auto;
			left: 0;
			right: 0;
			bottom: 0;
			height: 6upx;
			background-color: #ff3a1a;
		}
	}
}

.cz {
	position: relative;

	&:before {
		content: '';
		display: inline-block;
		width: 1upx;
		top: 10upx;
		bottom: 10upx;
		left: -40upx;
		background-color: #e2e2e2;
		position: absolute;
	}

	image {
		width: 25upx;
		height: 25upx;
		position: relative;
		top: 3upx;
	}

	text {
		font-size: 24upx;
		color: #3757c2;
	}
}

.card_bg {
	width: 231upx;
	height: 181upx;
	background-size: 100% 100%;
}

.juan {
	padding: 0 5upx;
	height: 26upx;
	line-height: 26upx;
	display: inline-block;
	text-align: center;
	border-radius: 3upx;
	border: solid 1upx #6a83d7;
	font-size: 18upx;
	color: #6a83d7;
	box-sizing: content-box;
}

.usebtn {
	display: inline-block;
	height: 38upx;
	line-height: 38upx;
	background-color: #6a83d7;
	border-radius: 20upx;
	border: solid 1upx #6a83d7;
	font-size: 20upx;
	color: #ffffff;
	padding: 0 15upx;
	box-sizing: content-box;
}

.carddate {
	position: absolute;
	top: 0;
	right: 0;
	background-size: 100%;
	width: 94upx;
	height: 73upx;
}

.cardbtn {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	display: inline-block;
	height: 95upx;
	line-height: 95upx;
	background-color: #ffffff;
	box-shadow: 0px 0px 15upx 0px rgba(0, 0, 0, 0.05);
}
</style>
